<template>
  <ul class="item-container clearfix">
    <li class="item-box map-container">
      <baidu-map
        :center="center"
        :zoom="zoom"
        :dragging="false"
        @ready="handler"
        class="map"
        ak="1FtoPznuBDPQen7ZCZ0HjApYCUvrfApp"
      >
        <bm-marker :position="center" :icon="{url: MapIcon, size: {width: 30, height: 45}}" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
        <bm-copyright anchor="BMAP_ANCHOR_TOP_RIGHT" :copyright="copyRight"></bm-copyright>
      </baidu-map>
    </li>
    <li class="item-box info-container">
      <div class="item title">西安网梦科技有限公司</div>
      <div class="item text">网梦科技——专注于互联网营销的技术服务商。</div>
      <div class="item path">地址：陕西省西安市科创路高新品阁1526</div>
      <div class="item tel">联系电话：1234567891</div>
      <div class="item mail">邮箱：wangmeng@163.com</div>
      <div class="item btn-box">
        <span>联系我们</span>
        <span>给我留言</span>
      </div>
    </li>
  </ul>
</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmMarker from "vue-baidu-map/components/overlays/Marker.vue";
import BmCopyright from "vue-baidu-map/components/controls/Copyright.vue";

export default {
  components: {
    BaiduMap,
    BmMarker,
    BmCopyright
  },
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
      copyRight: []
    };
  },
  created() {
    this.MapIcon = require("@/assets/img/marker_red_sprite.png");
  },
  methods: {
    handler({ BMap, map }) {
      this.center.lng = 108.919202;
      this.center.lat = 34.228381;
      this.zoom = 16;
      this.copyRight = [
        {
          id: 1,
          content: "power by ",
          bounds: { ne: { lng: 110, lat: 40 }, sw: { lng: 0, lat: 0 } }
        },
        { id: 2, content: "<a>kujomiva</a>" }
      ];
    }
  }
};
</script>


<style lang="less" scoped>
.item-box {
  width: 50%;
  float: left;
  padding: 20px 0;
  @media (max-width: 768px) {
    & {
      width: 100%;
      text-align: center;
    }
  }
}
.map {
  width: 100%;
  height: 300px;
}
.info-container {
  padding: 20px;
  .item {
    font-size: 14px;
    padding: 10px 0;
  }
  .title {
    font-size: 20px;
    font-weight: bold;
  }
  .btn-box {
    padding-top: 20px;
  }
  .btn-box > span {
    background-color: #007eff;
    color: #fff;
    padding: 10px 30px;
    margin-right: 20px;
    border-radius: 3px;
    cursor: pointer;
  }
}
</style>
